<template>
  <div class="news-pane">
    <el-container>
      <el-main class="news-main-pane">
        <div class="news-main-title-pane">
          <label class="title-label">话题组：</label>
          <el-select size="mini" placeholder="我的订阅" v-model="tag"></el-select>
          <el-divider direction="vertical"></el-divider>
          <label class="title-label">排序：</label>
          <el-select size="mini" placeholder="综合" v-model="sort"></el-select>
          <el-button class="right" type="primary" size="mini" icon="el-icon-edit" @click="createPost">创建记事</el-button>
          <!--
          <span class="news-logo">知新：记录正在发生的历史...</span>
          -->
        </div>
        <div class="news-list">
          <scroller height="84vh">
            <div v-for="(n,i) in newsList" :key="i" class="news-item-pane">
              <!--
              <news-card :news="n" :number="i"></news-card>
              -->
              <mat-card :mat="n"></mat-card>
            </div>
          </scroller>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Scroller from "../tools/Scroller.vue";
import MatCard from "../mats/MatCard.vue";
export default {
  components: {
    Scroller,
    MatCard
  },
  data() {
    return {
      newsList: [],
      tag: "",
      sort: ""
    };
  },
  computed: {
    tagid: function() {
      return this.$route.query.tagid;
    }

  },
  created() {
    this.$store.dispatch("setActiveNewsMenu", "/news/home");
    this.fetchNews();
  },
  watch : {
    tagid : function() {
      console.log("tagid changed")
      this.fetchNews()
    } 
  },
  methods: {
    createPost() {
      this.$router.push("/news/create");
    },
    fetchNews() {
      let url = "/api/v1/mats/search";
      let tagid = this.$route.query.tagid;
      if (tagid) {
        url = url + "?tagid=" + tagid;
      }
      this.$axios.get(url).then(res => {
        this.newsList = res.data.mats;
        /*
        this.newsList.forEach((p) => {
          if (p.star == undefined) {
            p.star = {
              value: 0,
            };
          }
        });
        */
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.news-pane
  padding 0 10px
  text-align left

  .news-main-pane
    padding 0 0.5vw

    .news-main-title-pane
      border-bottom 1px solid #eee
      padding 0.5vh 0.5vw

      .title-label
        color #999

      .news-logo
        float right
        text-align left
        font-size 1.2em
        font-weight bold
        color #999

      .right
        float right

    .news-item-pane
      margin 0.5vh 0


</style>